<!-- filename: frontend/src/pages/user-profile/user-profile.vue -->
<template>
  <view class="page-container">
    <Header @open-auth-modal="isAuthModalVisible = true" />
    <AuthModal v-if="isAuthModalVisible" @close="isAuthModalVisible = false" />

    <div class="content-wrapper" style="padding-top: 60px;">
      <view v-if="isLoading" class="loading-state">正在加载用户资料...</view>
      <view v-else-if="error" class="error-state">{{ error }}</view>
      
      <view v-else-if="profile" class="profile-content">
        <!-- 用户基础信息卡片 (与 profile.vue 类似) -->
        <view class="profile-header">
          <view class="avatar-wrapper">
            <image v-if="profile.avatar_url" :src="profile.avatar_url" class="avatar-image" mode="aspectFill"/>
            <view v-else class="avatar-placeholder">{{ (profile.username || 'U').charAt(0).toUpperCase() }}</view>
          </view>
          <div class="info-wrapper">
            <h1 class="username">{{ profile.username }}</h1>
            <p class="bio">{{ profile.bio || '暂无简介' }}</p>
          </div>
          <div class="actions-wrapper">
            <!-- 私信按钮占位 -->
            <button
              v-if="authStore.user && authStore.user.id !== profile.id"
              class="action-btn message-btn"
              @click="startConversation"
            >
              私信
            </button>
          </div>
        </view>

        <!-- 如果用户未开启隐身模式，则显示歌单和评论 -->
        <view v-if="!profile.is_stealth_mode">
          <view class="content-tabs">
            <view class="tab-item active">公开歌单</view>
            <!-- 可以在这里添加“公开评论”的标签页 -->
          </view>
          <view class="tab-content">
            <view v-if="!profile.public_playlists || profile.public_playlists.length === 0" class="empty-state">
              该用户没有公开的歌单
            </view>
            <!-- 此处将渲染歌单列表 -->
            <view v-else>
              <view class="public-playlist-grid">
                <view v-for="p in profile.public_playlists" :key="p.id" class="public-playlist-card" @click="navigateToPublicDetail(p.id)">
                  <view class="cover-wrapper">
                    <image v-if="p.cover_url" :src="p.cover_url" class="cover-image" mode="aspectFill" />
                    <view v-else class="cover-placeholder music-icon">
                      <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                    </view>
                  </view>
                  <view class="playlist-info">
                    <text class="playlist-name">{{ p.name }}</text>
                    <text class="song-count">{{ p.song_count }} 首</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 如果用户开启了隐身模式 -->
        <view v-else class="stealth-mode-notice">
          <p>该用户已开启隐身模式</p>
        </view>

      </view>
    </div>
    <Player v-if="playerStore.showPlayer" />
  </view>
</template>


<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/store/auth';
import { usePlayerStore } from '@/store/player';
import { request } from "@/utils/request"; // 【核心修改1】

import Header from '@/components/Header/Header.vue';
import AuthModal from '@/components/AuthModal/AuthModal.vue';
import Player from '@/components/Player.vue';

const playerStore = usePlayerStore();
const authStore = useAuthStore();
const isAuthModalVisible = ref(false);

const profile = ref(null);
const isLoading = ref(true);
const error = ref('');
let userId = null;

// --- 【核心修改2】重写 fetchUserProfile ---
const fetchUserProfile = async () => {
  isLoading.value = true;
  error.value = '';
  
  try {
    const data = await request({
      url: `/api/public/profile/${userId}`,
      method: 'GET'
    });
    profile.value = data;
    uni.setNavigationBarTitle({ title: data.username + '的主页' });
  } catch (error) {
    error.value = error?.data?.error || '加载用户资料失败';
  } finally {
    isLoading.value = false;
  }
};

// --- 无需修改的函数 ---
onLoad((options) => {
  userId = options.id;
  if (!userId) {
    error.value = '未指定用户ID';
    isLoading.value = false;
    return;
  }
  fetchUserProfile();
});

const startConversation = () => {
  if (!authStore.isLoggedIn) {
    isAuthModalVisible.value = true;
    return;
  }
  uni.navigateTo({
    url: `/pages/conversation/conversation?id=${profile.value.id}&username=${profile.value.username}`
  });
};

const navigateToPublicDetail = (id) => {
  uni.navigateTo({
    url: `/pages/public-playlist-detail/public-playlist-detail?id=${id}`
  });
};
</script>

<style scoped lang="scss">
/* 借用 profile.vue 和 public-playlist-detail.vue 的样式 */
.page-container { display: flex; justify-content: center; width: 100%; min-height: 100vh; background-color: #f8f8f8; }
.content-wrapper { width: 100%; max-width: 800px; padding: 20px; padding-bottom: 150px; }
.loading-state, .error-state, .empty-state { text-align: center; padding: 60px 20px; color: #888; }
.profile-header { display: flex; gap: 20px; padding: 25px; background-color: #fff; border-radius: 12px; margin-bottom: 20px; }
.avatar-wrapper { flex-shrink: 0; }
.avatar-placeholder, .avatar-image { width: 80px; height: 80px; border-radius: 50%; background-color: #007aff; color: white; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: bold; }
.avatar-image { background-color: #f0f0f0; }
.info-wrapper { flex-grow: 1; }
.username { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.bio { font-size: 14px; color: #666; }
.actions-wrapper { flex-shrink: 0; }
.action-btn { background-color: #007aff; color: white; font-size: 14px; }
.content-tabs { display: flex; gap: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.tab-item { padding: 10px 0; font-size: 16px; cursor: pointer; border-bottom: 2px solid transparent; &.active { font-weight: bold; border-bottom-color: #007aff; } }
.tab-content { background-color: #fff; border-radius: 12px; padding: 20px; }
.stealth-mode-notice { text-align: center; padding: 40px; background-color: #fff; border-radius: 12px; color: #888; }

.public-playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.public-playlist-card { position: relative; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.2s; &:hover { transform: translateY(-5px); } }
.cover-wrapper { width: 100%; padding-top: 100%; position: relative; background-color: #f0f0f0; }
.cover-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cover-placeholder.music-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; svg { color: #aaa; } }
.playlist-info { padding: 15px; }
.playlist-name { display: block; font-weight: 500; font-size: 16px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-count { display: block; font-size: 12px; color: #888; margin-top: 5px; }
</style>